<script setup>

import store from "../../store/index.js";
import {ref} from "vue";
import SignInCom from "./SignInCom.vue";
import SignUpCom from "./SignUpCom.vue";
import PasswordCom from "./PasswordCom.vue";

const appName = store.getters.getAppName;
const userMode = ref(store.getters.getUserType)//0学生 1教师
const cardMode = ref(0)//0登录 1注册 2忘记密码
const changeUserMode = (newMode)=>{
  userMode.value = newMode
  store.commit('setUserType', newMode)
}
const changeCardMode = (newMode)=>{
  cardMode.value = newMode
}

</script>

<template>
  <div class="card-container">
    <!--app名-->
    <h1>- 欢迎使用{{ appName }} -</h1>
    <!--用户身份-->
    <div class="user-btns">
      <button @click="changeUserMode(0)" class="select-btn" :class="{'selected-btn': userMode === 0}">学生登陆</button>
      <button @click="changeUserMode(1)" class="select-btn" :class="{'selected-btn': userMode === 1}">教师登录</button>
    </div>
    <!--登陆选项-->
    <SignInCom class="sign-area" v-if="cardMode === 0"/>
    <SignUpCom class="sign-area" v-if="cardMode === 1"/>
    <PasswordCom class="sign-area" v-if="cardMode === 2"/>
    <div class="sign-area-select-container">
      <div @click="changeCardMode(0)" :class="{'selected-btn-1': cardMode === 0}">用户登录</div>
      <div @click="changeCardMode(1)" :class="{'selected-btn-1': cardMode === 1}">用户注册</div>
      <div @click="changeCardMode(2)" :class="{'selected-btn-1': cardMode === 2}">忘记密码</div>
    </div>
  </div>
</template>

<style scoped>
  .card-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 8px 24px;
  }
  h1{
    color: #000000;
    font-size: 23px;
  }
  .user-btns{
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .user-btns button{
    border: none;
    background-color: transparent;
    padding: 8px 48px;
    color: #000000;
    outline: none;
    border-radius: 0;
  }
  .user-btns .select-btn{
    cursor: pointer;
    font-size: 15px;
  }
  .user-btns .selected-btn{
    border-bottom: solid 1px #419fffaa;
    color: #419fff;
  }
  .sign-area{
    width: 100%;
    height: 280px;
  }
  .sign-area-select-container{
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 13px;
    color: #000000;
  }
  .sign-area-select-container div{
    position: relative;
    cursor: pointer;
  }
  .selected-btn-1{
    color: #419fff;
  }
  .selected-btn-1:after{
    content: "";
    position: absolute;
    left: 50%;
    top: 120%;
    width: 12px;
    height: 2px;
    background-color: #419fffaa;
    transform: translate(-50%, -50%);
    border-radius: 1px;
  }
</style>